<template>

    <view class="womaninfo-container">
  
      <view class="bgc">
        
       <!-- 背景盒子 -->  
      </view>
      
      <!--固定位置盒子开始-->
      <view class="relative">
        <!-- 选项卡开始 -->
        <view class="infocard">
         <!-- 上部分开始 -->
         <view class="topbox">
          <!-- 左侧开始 -->
           <view class="left">
             <image :src="womaninfoList.images" mode=""></image>
           </view>
           <!-- 左侧结束 -->
           
           
           <!-- 右侧开始 -->
               <view class="right">
                 <!-- 名字和关注开始 -->
                 <view class="r1">
                   <view class="womanname">
                     {{womaninfoList.name}}
                   </view>
                   <view class="btn">
                     关注
                   </view>
                   
                 </view>
                  <!-- 名字和关注结束 -->
                 <!-- 中间信息盒子开始 -->
                 <view class="r2">
                   <text>{{womaninfoList.label}}</text>
                 </view>
                 <!-- 中间信息盒子结束 -->
                 <view class="r3">
                   {{womaninfoList.brief_introduction[0]}}|{{womaninfoList.brief_introduction[1]}}|{{womaninfoList.brief_introduction[2]}}
                   
                 </view>
                 
               </view>
           <!-- 右侧结束 --> 
           
         </view>
         <!-- 上部分结束 -->
         
         <!-- 下部分开始 -->
         <view class="botton">
           <view class="b1">
             注册公司:{{womaninfoList.registered_company}}
           </view>
           <view class="b2">
             职业: <text v-for="(item,i) in womaninfoList.occupation" :key="i">{{item}}</text> 
           </view>
           <view class="huibiao">
             <view class="hui1">
               身份已核实
             </view>
             <view class="hui2">
               <view class="hui-btn h1">
                 电话联系
               </view>
               <view class="hui-btn">
                 微信联系
               </view>
             </view>
             
           </view>
           
         </view>
         <!-- 下部分结束 -->
        </view>
        <!-- 选项卡结束 -->
        
        <!-- 信息区开始 -->
        <view class="infoarea">
          <!-- 主要技能开始 -->
          <view class="jineng">
            <view class="title">
              主要技能
            </view>
            
            <view class="btns">
              <view class="btn" v-for="(item,i) in womaninfoList.primary_skill" :key="i">
                {{item}}
              </view>         
            </view>
            
          </view>
          <!-- 主要技能结束 -->
        
          <!-- 个人简历开始 -->
          <view class="jianli">
            <view class="title">
              个人简历
            </view>
            
            <view class="jianliinfo">
             {{womaninfoList.self_introduction}}  
             <!-- <van-button type="default">默认按钮</van-button> -->
            </view>
            
          </view>
          <!-- 个人简历结束 -->
          
          <!-- 个人奖项开始 -->
          <view class="jiangxiang">
            <view class="title">
              个人奖项
            </view>
            
          </view>
          
          <!-- 个人奖项结束 -->
          
          <!-- 证件信息开始 -->
          <view class="zhengjian">
            <view class="title">
              证件信息
            </view>
            <view class="boxs">
              <view class="box" v-for="(item,i) in womaninfoList.id_information" :key='i'>
                 <image :src='item'  mode="" v-if="i<3"></image>
              </view> 
              
            </view>
            
          </view> 
           <view class="zhengjian">
            <view class="title">
              证件信息
            </view>
            <view class="boxs">
              <view class="box" v-for="(item,i) in womaninfoList.id_information" :key='i'>
                 <image :src='item'  mode="" v-if="i>=3"></image>
              </view> 
              
            </view>
            
            <!-- 底部图标区域开始 -->
            <view class="botton-icon">
              <view class="hehe">  
              <uni-icons type="chatboxes-filled" size="30"></uni-icons>  
               <view class="">
                 评价
               </view>
              </view> 
              <view class="hehe">  
              <uni-icons type="redo-filled" size="30"></uni-icons>  
               <view class="">
                 分享
               </view>
              </view>
              <view class="hehe">  
              <uni-icons type="weixin" size="30"></uni-icons> 
                <view class="">
                  微信联系
                </view>
              </view> 
              <view class="hehe">  
              <uni-icons type="phone-filled" size="30"></uni-icons>
              <view class="">
                电话 
              </view>
              </view>
              
            </view>
             <!-- 底部图标区域结束 -->
            
          </view>
          <!-- 证件信息结束 -->
          
         
        </view>
        <!-- 信息区结束 -->
        

        
      </view>
      <!--固定位置盒子结束-->


     
    </view>

</template>

<script>
  export default {
    data() {
      return {
        // 月嫂标识符id
        womanid:"",
        // 月嫂详情数据
        womaninfoList:[]
        
        
      };
    },
    onLoad(options){
      console.log("跳转月嫂详情页的数据携带id标识符",options);
      this.womanid=options.query
      console.log("保存月嫂id数据",this.womanid);
      
      // 调用获取月嫂详情的方法
      this.getWomaninfoList()
      

      
    },
    methods:{
      async getWomaninfoList(){
        const {data:res}=await uni.$http.get(`/mock/634a093fba6bdb4f54a8652d/domesticplatform/home/waiter/${this.womanid}`)
        console.log("获取到月嫂数据",res);
        this.womaninfoList=res.data.message[0]
        this.womaninfoList.label=this.womaninfoList.label.replace('[','').replace(']','').split(',') 
        this.womaninfoList.brief_introduction=this.womaninfoList.brief_introduction.replace('[','').replace(']','').split(',') 
        this.womaninfoList.occupation=this.womaninfoList.occupation.replace('[','').replace(']','').split(',')
        this.womaninfoList.primary_skill=this.womaninfoList.primary_skill.replace('[','').replace(']','').split(',') 
        this.womaninfoList.personal_details=this.womaninfoList.personal_details.replace('[','').replace(']','').split(',')
        this.womaninfoList.id_information=this.womaninfoList.id_information.replace('[','').replace(']','').split(',')
        console.log("存入月嫂数据",this.womaninfoList);
        
      }
      
    }
  }
</script>

<style lang="scss">
  .womaninfo-container{
    background-color: #f5f5f5;
    position: relative;
    width: 100%;
    height: 100%;
  
    // 背景颜色盒子
    .bgc{
      height: 100rpx;
      background-color: #3f51b5
      
    }
    
    .ralative{
      
    }
    .infocard{
      background-color: #ffffff;
      // padding:40rpx;
      height: 600rpx;
      width:680rpx;
      position: absolute;
      left: 40rpx;
      top: -100rpx; 
       // 上部分
      .topbox{
         display: flex;
         // justify-content: space-between;
         padding: 140rpx 40rpx 0rpx 40rpx;

        // 左
        .left{
          margin-right:26rpx ;
          height: 172rpx;
          width: 160rpx;
          background-color: greenyellow;
          image{
            height: 172rpx;
            width: 160rpx;
          }
        }
        // 右
        .right{
          flex: 1;
          .r1{
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 36rpx;
            .womanname{
              
            }
            .btn{
              border: solid 2rpx #3f51b5;
              font-size: 28rpx;
              padding: 0 30rpx;
              border-radius: 1em;
              background-color: #3f51b5;
              color: #fff;
            }
            
          }
          .r2{
            margin: 20rpx 0;
             text{
               font-size: 28rpx;
               border: solid 2rpx #3f51b5;
               border-radius: 1em;
               padding: 0 30rpx;
               color: #3f51b5;
             }
          
          }
          .r3{
             font-size: 36rpx;
             color: rgba(151, 145, 145, 1);
          }
          
        }

      }
      // 下部分
      .botton{
       color: rgba(151, 145, 145, 1);
       font-size: 28rpx;
       padding: 0 40rpx;
        .b1{
        
         }
         .b2{
           margin-top: 20rpx;
         }
        .huibiao{
          // padding: 0 30rpx;
          display: flex;
          height: 140rpx;
          // background-color: pink;
          justify-content: space-between;
          align-items: center;
          .hui1{
            color: #000;
             font-size: 36rpx;
          }
          .hui2{
            .hui-btn{
           
              font-size: 28rpx;
              border: solid 2rpx #3f51b5;
              border-radius: 1em;
              padding: 0 30rpx;
              color: #3f51b5;
            }
            .h1{
              margin-bottom: 20rpx;
            }
            
          }
          
        }
      }
    }
    // 信息区
    .infoarea{
      position: absolute;
      top: 520rpx;
      left: 40rpx;
      right: 40rpx;
       background-color: #ffffff;
       width:680rpx;
       // height: 1000rpx;
       // padding: 30rpx 30rpx 0 30rpx;
       
       // 主要技能
       .jineng{
         padding: 30rpx 30rpx 0 30rpx;
         .title{
            font-size: 36rpx;
            margin-bottom: 40rpx;
            &::before{
              content: "";
              width: 0;
              height: 28rpx;
              border-left: 8rpx solid #3f51b5;
              margin-right: 20rpx;
            }
         }
         .btns{
           display: flex;
           flex-wrap: wrap;/*换行*/
           .btn{
             padding: 0 30rpx;
             border: #3f51b5 2rpx solid;
             border-radius: 1em;
             color: #3f51b5;
             // width: 25%;
             margin-right: 40rpx;
             margin-bottom: 20rpx;
             font-size: 28rpx;
             
             
             
           }
           
         }
         
       }
       //个人简历
        .jianli{
          padding: 30rpx 30rpx 0 30rpx;
          .title{
             font-size: 36rpx;
             margin-bottom: 40rpx;
             &::before{
               content: "";
               width: 0;
               height: 28rpx;
               border-left: 8rpx solid #3f51b5;
               margin-right: 20rpx;
             }
          }
          .jianliinfo{
            // uni-app数字自动换行属性
            word-break: break-all;
            width:620rpx;
            color: rgba(151, 145, 145, 1);
            font-size: 28rpx;
          }
          
        }
        // 个人奖项
        .jiangxiang{
          padding: 30rpx 30rpx 0 30rpx;
          .title{
             font-size: 36rpx;
             margin-bottom: 40rpx;
             &::before{
               content: "";
               width: 0;
               height: 28rpx;
               border-left: 8rpx solid #3f51b5;
               margin-right: 20rpx;
             }
          }
          
        }
        // 证件信息
        .zhengjian{
          padding: 30rpx 30rpx 0 30rpx;
          .title{
             font-size: 36rpx;
             margin-bottom: 40rpx;
             &::before{
               content: "";
               width: 0;
               height: 28rpx;
               border-left: 8rpx solid #3f51b5;
               margin-right: 20rpx;
             }
          }
          .boxs{
            display: flex;
            margin-bottom: 40rpx;
            .box{
              width: 200rpx;
              height: 148rpx;
              background-color: #3f51b5;
              &:nth-child(2){
                margin: 0 12rpx;
              }
              image{
                width: 200rpx;
                height: 148rpx;
              }
             
            }
          }
          
        }
        // 底部图标区域
        .botton-icon{
          display: flex;
          justify-content: space-between;
          .hehe{
            font-size: 32rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            
            
          }
          
        }     
    }
           

  
  }

</style>
